<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>注册 | 依依博客</title>
<style>
body{
background-color:#DDE1E5;
}
#body{
	margin-top:130px;
	width:365px;
	margin-left:auto;
	margin-right:auto;
	font-size:14px;
	background-color:#DDE1E5;
	padding:20px;
	height:166px;
}
#title{
	padding-left:130px;
	font-size:18px;
	margin-bottom:20px;
}
#submit{
padding-top:5px;
	padding-left:88px;
}
a:link {text-decoration:none;} 
a:hover{text-decoration:none;}
li{
	list-style:none;
	margin-top:10px;
	margin-left:-25px;
}
</style>
 <style>

   .stats1{
     color:#aaa;
   }
   .stats2{
     color:#000;
   }   
   .stats3{
     color:red;
   }   
   .stats4{
     color:green;
   }
 </style>
</head>
	<body>
	<div id="body">
	<div id="title"><strong>用户注册</strong></div>
	<form action="<?php echo '__CONTROL__&m=reg';?>" method="post" onsubmit="return regs('click')">
		<input type="hidden" name="user_role[rid]" value="1"/>
		<!-- 用户名:<input type='text' name="username"/><br/>
		密&nbsp;码:<input type="password" name="password"/><br/>
		重&nbsp;复:<input type="password" name="passwordc"/><br/>
		<div id="submit">
		<a href="http://localhost/92/index.php?c=user&m=login_show"><input type="submit" value="登录"/></a><input type="submit" value="注册"/>
		</div> -->
		<ul>
		 <li>用户名:<input type="text" name="username" value="">
                <span class="stats1">请输入用户名</span><br>
         </li>
		 <li>密&nbsp;&nbsp;码:<input type="password" name="password" value="">
                <span class="stats1">输入用户密码</span><br>
         </li>
		 <li>重&nbsp;&nbsp;复:<input type="password" name="repass" value="">
                <span class="stats1">再次输入密码</span><br>
         </li>
		 <!-- 邮箱:<input type="text" name="email" value="">
              <span class="stats1">请输入你的邮箱</span><br> -->
         </ul>
		 <div id="submit">
		 
		
		<input type="submit" value="同意注册"/>
		<a href="<?php echo @$web.'?c=user&m=login_show'?>">
		<button type="button">返回登录</button>
		</a>
		</div> 
		 <!-- <input type="submit" name="sub" value="同意注册"> -->
	</form>
	</div>
	
	
	 <script>
//获取下一个span,可以通过这个对象给状态
function gspan (cobj) {
    while (true) {
	    if (cobj.nextSibling.nodeName!="SPAN") 
	       cobj=cobj.nextSibling;
		else 
		   return cobj.nextSibling;
		}
}
/*
通用检查方法
第一个参数：obj,是用来检查的对象
第二个参数：info，是用来检查的提示信息
第三个参数：fun,是一个回调函数，用来检查值是否按条件输入
第四个参数：click只是一个状态，分清楚是单击提交，还是失去焦点
*/

function check (obj,info,fun,click) {
        var sp=gspan(obj);
        obj.onfocus=function  () {
               sp.innerHTML=info;
			   sp.className="stats2";
			   }

        obj.onblur=function  () {
            if (fun(this.value)) {
               sp.innerHTML="输入正确";
			   sp.className="stats4";
			   }else{
			   sp.innerHTML=info;
			   sp.className="stats3";
			   }
           }
		   if (click=="click")
		       obj.onblur();
}

//页面加载完自动调用
onload=regs

function regs (click) {

var stat=true;
    var username=document.getElementsByName("username")[0];
    var password=document.getElementsByName("password")[0];
    var repass=document.getElementsByName("repass")[0];
    var email=document.getElementsByName("email")[0];

    check(username,"用户名长度5-20之间",function(val){
     if(val.match(/^\S+$/) && val.length >=5 && val.length <=20){
	     return true;
     }else{
         stat=false;
		 return false;
	 }
   },click);
   
   check(password,"密码须在6-20位之间",function(val){
      if(val.match(/^\S+$/) && val.length >=6 && val.length <=20){
	     return true;
    }else{
	     stat=false;
		 return false;
     }
   },click);

   check(repass,"两次密码填写须一致",function(val){
       if(val.match(/^\S+$/) && val.length >=6 && val.length<=20 && val==password.value){
          return true;
    }else{
	     stat=false;
		 return false;
     }
   },click);

   check(email,"请输入正确的邮箱", function(val){
        if (val.match(/\w+@\w+\.\w/)) {
           return true;
    }else{
	     stat=false;
		 return false;
     }
   },click);
      
   return stat;
}
  </script>
	
	
	
	</body>
</html>